<template>
    <div class="customer-page">
        <main>
            <div class="list-box" ref="listBox">
                <!-- <div class="list">
                    <div class="list-item1">
                        <img class="head-img"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <div class="msg">
                            <p>消息</p>
                            <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                class="msg-img" alt="">
                        </div>
                    </div>
                    <div class="list-item2">
                        <img class="head-img"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                        <div class="msg">
                            <p>消息</p>
                            <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                class="msg-img" alt="">
                        </div>
                    </div>
                </div> -->
                <div v-for="item in list" :key="item.id">
                    <div :class="[item.dir === 1 ? 'list-item2' : 'list-item1']">
                        <img class="head-img" :src="item.user_avatar" alt="">
                        <div class="msg">
                            <p v-if="item.type === 'text'">{{ item.message }}</p>
                            <img v-if="item.type === 'image'" :src="item.message" class="msg-img" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <ul v-show="show">
                <li v-for="(item, index) in emojiList" :key="index" @click="choseEmoji(item)">{{ item.content }}</li>
            </ul>
            <div class="bot-top">
                <el-icon @click="emojiIsShow">
                    <Odometer />
                </el-icon>
                <el-icon>
                    <FolderOpened />
                </el-icon>
            </div>
            <el-input v-model="textarea" style="width: 100%" :rows="4" type="textarea" placeholder="Please input"
                class="inp" />
            <el-button type="primary" class="btn" @click="addMessage">发送</el-button>
        </footer>
    </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { emojiList } from './emoji';

const textarea = ref('')
const show = ref(false)
const user_id = 2
const server_id = 514222

const list = ref([])
const listBox = ref()

// Create WebSocket connection.
const socket = new WebSocket(`ws://124.221.74.149:8003/koa/ws?user_id=${user_id}&server_id=${server_id}`);

// Connection opened
socket.addEventListener("open", function (event) {
    socket.send(JSON.stringify({ type: 'getChatList' }));
});

// Listen for messages
socket.addEventListener("message", function (event) {
    console.log("Message from server ", event.data);

    const data = JSON.parse(event.data)

    switch (data.type) {
        case 'addMessage':
            list.value.push(data.data)
            nextTick(() => {
                listBox.value.scrollTop = listBox.value.scrollHeight
            })
            break;
        case 'getChatList':
            list.value = data.data
            nextTick(() => {
                listBox.value.scrollTop = listBox.value.scrollHeight
            })
            return;
    }
});

const addMessage = () => {
    // {
    //     type:'',
    //     data:{
    //         user_id,
    //         server_id,
    //         type,
    //         message
    //     }
    // }
    socket.send(JSON.stringify({
        type: 'addMessage',
        data: {
            user_id: user_id,
            server_id: server_id,
            type: 'text',
            message: textarea.value
        }
    }))
}
// 点击时展开说着隐藏emoji
const emojiIsShow = () =>{
    show.value = !show.value
}

// 选择表情
const choseEmoji = (item) =>{
    textarea.value += item.content
    show.value = false
}

</script>

<style lang="scss" scoped>
.customer-page {
    height: 700px;
    display: flex;
    flex-direction: column;

    main {
        flex: 1;

        .list-box {
            height: 500px;
            overflow-y: scroll;

            .list-item1,
            .list-item2 {
                display: flex;

                .head-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin: 5px
                }

                .msg {

                    p {
                        background-color: aquamarine;
                        border-radius: 10px;
                        padding: 8px 10px;
                    }

                    img {
                        width: 150px;
                        height: 150px;
                        border-radius: 10px;
                    }
                }
            }

            .list-item2 {
                flex-direction: row-reverse;
                text-align: right;
            }
        }
    }

    footer {
        position: relative;
        height: 200px;
        border-top: 1px solid #ccc;

        ul{
            position: absolute;
            left: 0;
            top: -150px;
            width: 150px;
            height: 150px;
            background-color: pink;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;

            li{
                margin: 10px;
            }
        }

        .bot-top {
            line-height: 40px;

            .el-icon {
                font-size: 22px;
                margin: 0px 5px;
            }
        }

        .inp {
            border: none;
        }

        .btn {
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
    }
}
</style>